<template>
    <div>
        <div class="login"><!--这里是要展示的内容层-->
            <div class="popupcontents">
                <div class="coursecontent">
                    <ul>
                        <li class="coursecontent-list" v-for="(iiem11,index11) in teacherinformation" :key="index11" @click="infos(iiem11)">
                            <div>
                                <img :src="iiem11.map.userinfo.avatar" alt="">
                            </div>
                            <div>
                                <h3>{{iiem11.map.userinfo.nick_name}}</h3>
                                <label>                                 
                                    <span class="fistcd">课程数：{{iiem11.map.classCount}}</span>
                                    <span>学生数:{{iiem11.map.studentCount}}</span>
                                    <span>中级</span>
                                </label>
                                <label class="teacherident">
                                    <span class="but">上门私教</span>
                                    <span class="but">助学师</span>
                                </label>
                            </div>
                            <div>
                                <span>评分{{iiem11.score}}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!--这里是半透明背景层-->
        <div class="over" @click="toclose"></div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            teacherinformation:[],
        }   
    },
    props:['mechanism_id','Isshow','master_id','master_name'],
    mounted() {
        var _this = this
        _this.Getteachers();
    },
    methods:{
        toclose(){
            this.Isshow = false
            this.$emit("update:Isshow",this.Isshow)
        },
        infos(e){
            console.log(e,'---')
            this.Isshow = false
            this.$emit("update:master_id",e.user_id)
            this.$emit("update:master_name",e.map.userinfo.nick_name)
            this.$emit("update:Isshow",this.Isshow)
        },
        Getteachers(){//老师
            var data = {
                mechanism_id:this.mechanism_id,
                pageSize:12,
                currentPage:this.currentPage,
                status:2,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterInfo/queryMechanismMasters',
                params:data,
            }).then((res) =>{
                console.log(res.data.data,'老师信息')
                this.teacherinformation = res.data.data
            }).catch((error) =>{
                console.log(error)
            })
        },
    }
}
</script>
<style lang="less" scoped>
    .coursecontent{
        position: relative;
        width: 94%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        ul{
            width: 100%;
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 490px;
                border: 1px solid #47CDCF;
                height: 140px;
                border-radius: 20px;
                margin-top: 30px;
                cursor: pointer;
            }
        }
    }
    .coursecontent-list{
        display: flex;
        align-items: center;
        cursor: pointer;
        div{
            &:nth-child(1){
                width: 26%;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                cursor: pointer;
            }
            &:nth-child(2){
                width: 54%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                h3{
                    margin: 0;
                }
                label{
                    width: 100%;
                    span{
                        display: inline-block;
                        height: 20px;
                        line-height: 20px;
                        font-size: 12px;
                        margin-left: 14px;
                        margin-top: 14px;
                        cursor: pointer;
                    }
                    .but{
                        
                        margin-left: 0;
                        border:1px solid #ff9d3d;
                        border-radius: 10px;
                        width: 70px;
                        text-align: center;
                        cursor: pointer;
                    }
                }
            }
            &:nth-child(3){
                width: 20%;
                display: flex;
                justify-content: flex-end;
                margin-bottom: auto;
                margin-right: 20px;
                margin-top: 20px;
                font-size: 12px;
                color: #FA5353;
            }
        }
        img{
            width: 100px;
            height: 100px;
            border-radius: 20px;
            cursor: pointer;
        }
    }
    .login {
    position: fixed;
    font-size: 24px;
    height: 576px;
    width: 1063px;
    border-radius:10px;
    background-color: #ffffff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2405;
  }
  .over{
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    z-index: 1002;
    background-color: #111111;
  }
  .popupcontents{
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
</style>